.bg img{
	position: fixed;
	top:0;
	width: 100%;
	height:100%;
	opacity: 1;
	z-index: -100; 
	background-attachment: fixed
}
       .POPO {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO3 {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO4 {
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO5 {
    position: absolute;
    top: 140%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO6 {
    position: absolute;
    top: 170%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO7 {
    position: absolute;
    top: 200%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO8 {
    position: absolute;
    top: 230%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO9 {
    position: absolute;
    top: 260%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO10 {
    position: absolute;
    top: 290%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO11 {
    position: absolute;
    top: 320%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO12 {
    position: absolute;
    top: 350%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO13 {
    position: absolute;
    top: 380%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO14 {
    position: absolute;
    top: 410%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO15 {
    position: absolute;
    top: 440%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
.POPO16 {
    position: absolute;
    top: 470%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    text-align: center;
    line-height: 179px;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
}
a:hover{
    animation: animate 8s linear infinite;
}
@keyframes animate {
    0%{
        background-position: 0%;
    }
    100%{
        background-position: 400%;
    }
}
a:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity:0;
    transition: 0.5s;

}
a:hover:before{
    filter:blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}
@font-face {  
    font-family: 'marquee2';  /*重命名字体名 */
    src: url('font/zztt3.ttf'); /*引入字体*/
    font-weight: normal;  
    font-style: normal;  
  }
#rrr{
  width: 100%;
  height: 100px;
  font-family: 'marquee2'; 
  text-align:'atou';
    font-size: 120px;
    color: aqua; 
}
.r1{
    width: 100%;
    height: 120px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r2{
    width: 100%;
    height: 180px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r3{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r4{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r5{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r6{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r7{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r8{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r9{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r10{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r11{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r12{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r13{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r14{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r15{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r16{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r17{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r18{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }
  .r20{
    width: 100%;
    height: 100px;
    font-family: 'marquee2'; 
    text-align:'atou';
      font-size: 120px;
      color: aqua;
      
  }